<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>x-admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/xadmin/lib/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <!--主体内容 start-->
        <div class="layui-row">

            <div class="layui-col-md3">
                <input type="text" id="ser_row" name="ser_row" required  lay-verify="required" placeholder="名称" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-col-md1">
                <button style="margin-left: 50px;" class="layui-btn" onclick="ser_on()">搜索</button>
            </div>
            <div class="layui-col-md8">
                <button style="float: right;" class="layui-btn" onclick="ser_add()">添加</button>
            </div>
        </div>
        <table id="demo" lay-filter="test">

        </table>


        <!--主体内容 end-->
    </div>
</div>


<!-- 角色分配 -->
<div class="zTreeDemoBackground" style="display: none" id="role">
    <input type="hidden" id="nodeid">
    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-2">
            <ul id="treeType" class="ztree"></ul>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-sm-offset-4" style="margin-bottom: 15px">
            <input type="button" style="margin-left: 10%" value="确认分配" class="layui-btn btn-primary" id="postform"/>
        </div>
    </div>
</div>

<script src="/static/xadmin/lib/layui/jquery-3.2.1.min.js"></script>
<script src="/static/xadmin/lib/layui/layui.js"></script>
<link rel="stylesheet" href="/static/zTree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/zTree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="/static/zTree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="/static/zTree/jquery.ztree.exedit-3.5.js"></script>

<script>
    layui.config({
        base: '/static/xadmin/' //静态资源所在路径
    });
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
    });
    layui.use('table', function(){
        var table = layui.table;
        var urls = '{:url("/admin/authrole/index")}';
        //第一个实例
        TB = table.render({
            elem: '#demo'
            ,height: 'full-100'
            ,limits:[100,500]
            ,limit:100
            ,url: urls //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'role_id', title: 'ID'}
                ,{field: 'role_name', title: '角色名称'}
                ,{field: 'desc', title: '介绍'}
                ,{field: 'modified', title: '更新时间'}
                ,{field: '#', title: '操作',toolbar: '#barDemo'}
            ]]
        });
    });
    //搜索
    function ser_on(){
        var ser_row = $("#ser_row").val();
        var urls = '{:url("admin/authrole/index")}'+'?keyword='+ser_row;
        TB.reload({
            url: urls
            ,cols: [[ //表头
                {field: 'role_id', title: 'ID'}
                ,{field: 'role_name', title: '角色名称'}
                ,{field: 'desc', title: '介绍'}
                ,{field: 'modified', title: '更新时间'}
                ,{field: '#', title: '操作',toolbar: '#barDemo'}
            ]]
        });
    }
    //    添加
    function ser_add() {
        var url='{:url("admin/authrole/add")}';
        layer.open({
            type: 2,
            title: '角色的添加',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url, //iframe的url
            end:function () {
                location.reload()
            }
        });
    }
    //    b编辑
    function set_edit(t) {
        var role_id=$(t).attr("role_id-data");
        var url='{:url("admin/authrole/edit")}'+'?role_id='+role_id;
        layer.open({
            type: 2,
            title: '角色的编辑',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url, //iframe的url
            end:function () {
                location.reload()
            }
        });
    }


    //删除
    function set_del(t) {
        var id=$(t).attr("id-data");
        layer.confirm('你确定要删除么？', {
            btn: ['确定', '取消'] //可以无限个按钮
        }, function(index, layero){
            //按钮【按钮一】的回调
            $.post('{:url("admin/authrole/del")}',{'id':id},function(data){
                if(data.code==1){
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function () {
                        location.reload();
                    },1500);

                }else{
                    layer.alert(data.msg,{icon:2});
                }
            });

        }, function(index){
            //按钮【按钮二】的回调
        });
    }
    zNodes = '';
    var index = '';
    var index2 = '';
    //分配权限
    function giveQx(t){
        var id=$(t).attr("role_id-data");
        $("#nodeid").val(id);
        //加载层
        index2 = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
        //获取权限信息
        $.getJSON("{:url('admin/authrole/give')}", {'type' : 'get', 'id' : id}, function(res){
            layer.close(index2);
            if(res.code == 1){
                zNodes = JSON.parse(res.data);  //将字符串转换成obj

                //页面层
                index = layer.open({
                    type: 1,
                    area:['500px', '80%'],
                    title:'权限分配',
                    skin: 'layui-layer-demo', //加上边框
                    content: $('#role')
                });

                //设置zetree
                var setting = {
                    check:{
                        enable:true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };

                $.fn.zTree.init($("#treeType"), setting, zNodes);
                var zTree = $.fn.zTree.getZTreeObj("treeType");
                zTree.expandAll(true);

            }else{
                layer.msg(res.msg,{icon:2});
            }
        });
    }

    //确认分配权限
    $("#postform").click(function(){
        var zTree = $.fn.zTree.getZTreeObj("treeType");
        var nodes = zTree.getCheckedNodes(true);
        var NodeString = '';
        $.each(nodes, function (n, value) {
            if(n>0){
                NodeString += ',';
            }
            NodeString += value.id;
        });
        var id = $("#nodeid").val();
        //写入库
        $.post('{:url("admin/authrole/give")}', {'type' : 'give', 'id' : id, 'rule' : NodeString}, function(res){
            layer.close(index);
            if(res.code == 1){
                layer.msg(res.msg,{icon:1});
                setTimeout(function () {
                    location.reload();
                },1500);
            }else{
                layer.msg(res.msg,{icon:2});
            }

        }, 'json')
    })







    /*读取当前用户是否是超级管理员，不是则不可以对超级管理员编辑和权限分配
     */
    IS_ROLE={$is_role};

</script>
</body>
</html>
<script type="text/html" id="barDemo">
{{#  if(d.role_id ==1 && IS_ROLE== 1 ){ }}
<a class="layui-btn layui-btn-xs" lay-event="detail"  role_id-data="{{d.role_id}}" onclick="set_edit(this)">修改</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" role_id-data="{{d.role_id}}" onclick="giveQx(this)">权限分配</a>
{{#  } else if(d.role_id !=1){ }}
<a class="layui-btn layui-btn-xs" lay-event="detail"  role_id-data="{{d.role_id}}" onclick="set_edit(this)">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs "  role_id-data="{{d.role_id}}" onclick="set_del(this)">删除</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" role_id-data="{{d.role_id}}" onclick="giveQx(this)">权限分配</a>
{{#  } }}
</script>

<!--
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail"  role_id-data="{{d.role_id}}" onclick="set_edit(this)">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs "  role_id-data="{{d.role_id}}" onclick="set_del(this)">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" role_id-data="{{d.role_id}}" onclick="giveQx({{d.role_id}})">权限分配</a>
</script>-->
